<template>
  <div class="container">
    <Card shadow class="url-list">
      <Form inline>
        <FormItem>
          <DatePicker v-model="dateRange" @on-change="dateChange" @on-ok="dateChangeOk" type="daterange" split-panels placeholder="Select date" style="width:300px" :options="options" format="yyyy-MM-dd HH:mm:ss" confirm />
        </FormItem>
      </Form>
      <Table :highlight-row="isHighlight" style="flex:1" size="small" :columns="urlColumns" :data="urlData" :row-class-name="rowClassName" @on-row-click="selectRow" :loading="urlLoading">
        <template slot-scope="{ row }" slot="name">
          <div style=" display: flex; justify-content: space-between;">
            <span>{{ row.name }}<Icon type="md-pricetags" style=" color: rgb(102, 102, 102); margin-left: 5px;font-size: 14px;" /> </span>
            <Icon type="ios-arrow-forward" style=" color: #333; font-size: 18px;" />
          </div>
        </template>
      </Table>
    </Card>
    <div style="flex:1;height: 100%; overflow: auto;    padding-top: 74px;">
      <div class="detail-info-line">
        <span class="head-info-box">
          <label class="value">{{ apiStatisticsData.sumTime }}s</label>
          <label class="title">平均网络耗时</label>
        </span>
        <span class="head-info-box user-count"> <label class="value">2</label><label class="title">影响用户</label> </span>
        <span class="head-info-box page-count">
          <label class="value">{{ apiStatisticsData.pageNum }}</label> <label class="title">发生页面</label></span
        >
      </div>
      <div class="pages-card">
        <Card shadow>
          <div slot="title">
            <span> 发生页面列表</span>
          </div>
          <div>
            <p class="page-line" v-for="(item, index) in apiStatisticsData.urlList" :key="index">
              <span class="text-url">{{ item.url }}</span>
              <span class="text-count">{{ item.number }}</span>
            </p>
          </div>
        </Card>
      </div>
    </div>

    <!-- <Row>
        <Card shadow>
        <div slot="title">
            页面加载时间详情
            <div style="display:inline-block" @mouseover="visible" @mouseout="invisible">
              <Icon type="md-help-circle" />
              <div v-if="isShow" style="position:absolute;top:30px;left:10px">
                <Card style="width:350px;z-index:1000">
                  <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    性能指标说明
                  </p>
                  <p>
                    备注：
                    <a href="https://help.aliyun.com/document_detail/60288.html?spm=5176.2020520178/retcode.0.0.73f23352ENMwXA#%E8%AE%BF%E9%97%AE%E9%80%9F%E5%BA%A6" slot="extra">
                      <Icon type="ios-loop-strong"></Icon>
                      性能指标详细文档地址
                    </a>
                  </p>
                  <h6 style="margin-top:10px">关键性能指标</h6>
                  <ul style="list-style:none;margin-top:10px">
                    <li v-for="item in timeArray" :value="item.value" :key="item.key">
                      <p>{{ item.value }}:{{ item.key }}</p>
                    </li>
                  </ul>
                  <h6 style="margin-top:10px">区间段耗时</h6>
                  <ul style="list-style:none;margin-top:10px">
                    <li v-for="item in rangeArray" :value="item.value" :key="item.key">
                      <p>{{ item.value }}:{{ item.key }}</p>
                    </li>
                  </ul>
                </Card>
              </div>
            </div>
          </div>
          <div style="height:400px">
            <Loading :isSpinShow="isSpinShowDetail"></Loading>
            <v-chart :force-fit="true" height="400" :data="lineData" :scale="lineScale" :padding="loadingTimePadding">
              <v-tooltip />
              <v-axis />
              <v-legend />
              <v-line position="index_timestamp_ms*ms" color="type" />
              <v-point position="index_timestamp_ms*ms" color="type" :size="4" :v-style="style" :shape="'circle'" />
            </v-chart>
          </div>
        </Card>
      </Row> -->
    <!--
      <Row>
        <Card shadow>
          <div slot="title">
            页面加载瀑布图
            <div style="display:inline-block" @mouseover="waterPullVisible" @mouseout="waterPullInvisible">
              <Icon type="md-help-circle" />
              <div v-if="isShow1" style="position:absolute;top:30px;left:10px">
                <Card style="width:350px;z-index:1000">
                  <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    性能指标说明
                  </p>
                  <p>
                    备注：
                    <a href="https://help.aliyun.com/document_detail/60288.html?spm=5176.2020520178/retcode.0.0.73f23352ENMwXA#%E8%AE%BF%E9%97%AE%E9%80%9F%E5%BA%A6" slot="extra">
                      <Icon type="ios-loop-strong"></Icon>
                      性能指标详细文档地址
                    </a>
                  </p>
                  <h6 style="margin-top:10px">区间段耗时</h6>
                  <ul style="list-style:none;margin-top:10px">
                    <li v-for="item in rangeArray" :value="item.value" :key="item.key">
                      <p>{{ item.value }}:{{ item.key }}</p>
                    </li>
                  </ul>
                </Card>
              </div>
            </div>
          </div>
          <div style="height:400px">
            <Loading :isSpinShow="isSpinShowWaterfall"></Loading>
            <v-chart :forceFit="true" :padding="padding" :height="height1" :data="data1">
              <v-coord type="rect" direction="LB" />
              <v-tooltip dataKey="profession*range" :onChange="itemFormatter" />
              <v-legend />
              <v-axis dataKey="profession" :label="label" />
              <v-bar position="profession*range" color="profession" />
            </v-chart>
          </div>
        </Card>
      </Row>
    </div> -->
  </div>
</template>

<script>
  import moment from 'moment'
  import { Page } from 'iview'
  import { fetchTimeDetail, fetchTimeLine, fetchApiList, fetchStatisticsData } from '@/api/performance'
  import DataSet from '@antv/data-set'
  import Loading from '@/view/components/loading/loading.vue'
  import _ from 'lodash'

  export default {
    name: 'ApiPerformance',
    components: {
      Page,
      Loading
    },
    data() {
      return {
        isHighlight: true,
        isSpinShowDetail: true,
        isSpinShowWaterfall: true,
        data1: [],
        height1: 400,
        label: {
          offset: 12
        },
        padding: [20, 80, 70, 110],
        loadingTimePadding: [20, 120, 140, 80],
        areaData: [],
        height: 200,
        field: 'error_name',
        errorName: '',
        dateRange: [
          moment()
            .subtract(30, 'day')
            .toDate(),
          moment().toDate()
        ],
        // 堆叠图日期
        options: {
          disabledDate(date) {
            let initdate = Date.now() - 30 * 24 * 60 * 60 * 1000
            return (date && date.valueOf() < initdate) || (date && date.valueOf() > Date.now())
          }
        },
        date: new Date(),
        startUpData: {
          dataEmpty: true
        },
        columns: [
          {
            title: '错误描述',
            key: 'e_desc'
          },
          {
            title: '堆栈信息',
            key: 'e_stack'
          },
          {
            title: '地域',
            key: 'position',
            render: (h, params) => {
              const { row } = params
              const { province, city } = row
              return h('div', `${province} ${city}`)
            }
          },
          {
            title: '时间',
            width: 150,
            key: 'date',
            render: (h, params) => {
              const { row } = params
              return h('div', moment(row.timestamp).format('YYYY/MM/DD HH:mm:ss'))
            }
          }
        ],
        current: 1,
        pageSize: 10,
        total: 10,
        urlColumns: [
          {
            title: 'API',
            slot: 'name'
          }
        ],

        urlData: [],
        chartData: {},
        percent: 0,
        apiStatisticsData: {
          pageNum: 0,
          sumTime: 0,
          urlList: []
        },
        api: '',

        isShow: false,
        isShow1: false,
        urlLoading: true
      }
    },
    methods: {
      getViewData(skey, svalue, data = []) {
        var ret = {
          columns: [skey, svalue],
          rows: []
        }
        data.forEach(({ name: key, value }) => {
          ret.rows.push({
            [skey]: key,
            [svalue]: value
          })
        })
        return ret
      },
      async getUrlList(params = {}) {
        const { st, et, summaryBy } = params
        const res = await fetchApiList({
          st: st || +this.dateRange[0],
          et: et || +this.dateRange[1],
          summaryBy: summaryBy || 'day'
        })
        this.urlData = (res.data || []).map((item, index) => ({
          name: item
        }))
        this.api = _.get(this, ['urlData', 0, 'name'], '')
        // this.getTimeDetail()
        this.getStatisticsData()
        if (this.urlColumns) {
          this.urlLoading = false
        }
      },
      async getStatisticsData(params = {}) {
        const { st, et, api, summaryBy } = params
        const res = await fetchStatisticsData({
          st: st || +this.dateRange[0],
          et: et || +this.dateRange[1],
          api: api || this.api,
          summaryBy: summaryBy || 'day'
        })
        this.apiStatisticsData = res.data
      },
      async getTimeLine(params = {}) {
        const { st, et } = params
        const res = await fetchTimeLine({
          st: st || +this.dateRange[0],
          et: et || +this.dateRange[1],
          url: this.url,
          summaryBy: 'minute'
        })
        /* eslint-disable */
        const { dns_lookup_ms = 0, tcp_connect_ms = 0, ssl_connect_ms = 0, response_request_ms = 0, dom_parse_ms = 0, response_transfer_ms = 0, load_resource_ms = 0 } = res.data
        const sourceData = [
          {
            profession: 'DNS查询',
            highest: dns_lookup_ms,
            minimum: 0,
            mean: 56636
          },
          {
            profession: 'TCP连接',
            highest: dns_lookup_ms + tcp_connect_ms,
            minimum: dns_lookup_ms,
            mean: 66625
          },
          {
            profession: 'SSL 建连',
            highest: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms,
            minimum: dns_lookup_ms + tcp_connect_ms,
            mean: 72536
          },
          {
            profession: '请求响应',
            highest: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms + response_request_ms,
            minimum: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms,
            mean: 75256
          },
          {
            profession: '内容传输',
            highest: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms + response_request_ms + response_transfer_ms,
            minimum: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms + response_request_ms,
            mean: 77031
          },
          {
            profession: 'DOM解析',
            highest: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms + response_request_ms + response_transfer_ms + dom_parse_ms,
            minimum: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms + response_request_ms + response_transfer_ms,
            mean: 77031
          },
          {
            profession: '资源加载',
            highest: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms + response_request_ms + response_transfer_ms + dom_parse_ms + load_resource_ms,
            minimum: dns_lookup_ms + tcp_connect_ms + ssl_connect_ms + response_request_ms + response_transfer_ms + dom_parse_ms,
            mean: 77031
          }
        ]

        const dv = new DataSet.View().source(sourceData.reverse())
        dv.transform({
          type: 'map',
          key: 'range',
          callback(row) {
            row.range = [row.minimum, row.highest]
            return row
          }
        })
        this.data1 = dv.rows
        if (this.data1) {
          this.isSpinShowWaterfall = false
        }
      },
      onPageChange(current) {
        this.getListData({
          current
        })
      },

      dateChange([st, et]) {
        let format = 'YYYY-MM-DD HH:mm:ss'
        let startAt = moment(st)
          .startOf('day')
          .format(format)
        let endAt = moment(et)
          .endOf('day')
          .format(format)
        this.dateRange = [startAt, endAt]
      },
      dateChangeOk() {
        this.urlLoading = true
        this.isSpinShowDetail = true
        this.isSpinShowWaterfall = true
        this.getUrlList()
        this.getStatisticsData()
      },
      selectRow(record, index) {
        const self = this
        self.rowClassName = () => {}
        const { name = '' } = record
        self.api = name
        self.isSpinShowDetail = true
        self.isSpinShowWaterfall = true
        self.getStatisticsData()
      },
      itemFormatter(e) {
        let attrs = e.tooltip._attrs
        if (e.items) {
          const items = e.items[0].value.split('-')
          let range = items[1] - items[0]
          attrs.itemTpl = `<ul class="g2-tooltip-list-item"> <li data-v-gtlv >{name}：${range}` + `ms</li> </ul>`
        }
      },
      visible() {
        this.isShow = true
      },
      invisible() {
        this.isShow = false
      },
      waterPullVisible() {
        this.isShow1 = true
      },
      waterPullInvisible() {
        this.isShow1 = false
      },
      rowClassName(row, index) {
        if (index === 0) {
          return 'demo-table-info-row'
        }
        return ''
      }
    },
    mounted() {
      this.resize()
      this.getUrlList()
    }
  }
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: row;
    height: calc(100%);
  }
  .detail-info-line {
    width: 100%;
    height: 1.12rem;
    padding: 0 0.3rem;
    margin-bottom: 0.3rem;
    .head-info-box {
      width: 2.3rem;
      height: 1.12rem;
      padding: 0.16rem;
      color: #fff;
      background: #e0b226;
      float: left;
      border-radius: 0.08rem;
      position: relative;
      .value {
        position: absolute;
        font-size: 0.18rem;
        margin-top: 0.5rem;
      }
      .title {
        float: left;
        font-size: 0.18rem;
      }
    }
    .user-count {
      background: #ff7956;
      margin-left: 0.3rem;
    }
    .page-count {
      background: #2196f3;
      margin-left: 0.3rem;
    }
  }
  .pages-card {
    padding: 0.2rem 0.3rem;
    .page-line {
      padding: 0.1rem 0;
      margin-top: 0;
      margin-bottom: 1em;
      .text-url {
        float: left;
      }
      .text-count {
        float: right;
      }
    }
  }
  .url-list {
    width: 462px;
    height: 100%;
    overflow: auto;
  }
  .demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
</style>
<style lang="less">
  .g2-tooltip-list-item {
    list-style: none;
  }
  .ivu-table .demo-table-info-row td {
    background-color: #ebf7ff;
  }
</style>
